<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    select {
        width:200px;
        height: 200px;
        background-color: #33cccc;
        font-size: 20px;
    }
</style>
<body>
<select id="all" multiple="multiple">
    <option>苹果1</option>
    <option>橘子2</option>
    <option>梨3</option>
    <option>西瓜4</option>
    <option>水蜜桃5</option>
</select>

<input type="button" value=">>" id="btn1">
<input type="button" value="<<" id="btn2">
<input type="button" value=">" id="btn3">
<input type="button" value="<" id="btn4">

<select id="select" multiple="multiple">

</select>
<script>
    var btn1=document.getElementById("btn1");
    var btn2=document.getElementById("btn2");
    var btn3=document.getElementById("btn3");
    var btn4=document.getElementById("btn4");

    var left=document.getElementById("all");
    var right=document.getElementById("select");
//每一个点击按钮的源代码，哈哈哈。
   /* btn1.onclick= function () {
        var options=left.children;
        for (var i=0;i<options.length;i++){
            var option=options[i];
            right.appendChild(option)
            i--;
        }
    }
    btn2.onclick= function () {
        var options=right.children;
        for (var i=0;i<options.length;i++){
            var option=options[i];
            left.appendChild(option);
            i--;
        }
    }
    btn3.onclick= function () {
        var options=left.children;
        for (var i=0;i<options.length;i++){
            var option=options[i];
            if(option.selected){
                right.appendChild(option)
                option.selected=false;
                i--;
            }
        }
    }
    btn4.onclick= function () {
        var options=right.children;
        for (var i=0;i<options.length;i++){
            var option=options[i];
            if(option.selected){
                left.appendChild(option)
                option.selected=false;
                i--;
            }
        }
    }
    */

    btn1.onclick=function(){
         move(left,right,true);
    }
    btn2.onclick=function(){
         move(right,left,true);
    }
    btn3.onclick=function(){
         move(left,right,false);
    }
    btn4.onclick=function(){
         move(right,left,false);
    }

    //封装函数(大部分代码 相同 把代码不同的地方用参数代替)
    function move( from,go,isMoveAll){
        var options=from.children;
        //获取从那边过来的所有的option

        for (var i=0;i<options.length;i++){
            var option=options[i];

            //每一个option是每一个水果；
            //判断每个水果的选中状态，true表示全部被选中，
            //false表示没被全选，实现option.selected 判断选中状态也是true 所以只会转移被选的水果
            if(isMoveAll||option.selected){
          //判断当要一次把全部水果移过去则是 isMoveAll=true  实现btn1 和btn2操作
          //判断当要一个一个把水果移过去则是 isMoveAll=false 实现btn3 和btn4操作
          //而且当一个一个选水果时 option.selected状态也是true
                go.appendChild(option);
                //转移被选的水果
                option.selected=false;
                //转移后 把选中过来的水果状态改为不被选中( 可以实现清除底色效果，如果背景为白色 没什么影响)
                i--;
            }
        }
    }
//问题，为什么全部转移过来时 没有点击选也全能选过来，遍历完所有水果后，直接给了一个判断让遍历完的水果直接可以转移














</script>

</body>
</html>